<template>
    <div>
        <el-container class="el-conta">
            <el-header>
                <el-table 
                :data="list" 
                max-height="450px" 
                v-loading="flag" 
                :border="true"
                >
                    <el-table-column prop="category" label="产品分类" />
                    <el-table-column prop="brand" label="产品品牌" />
                    <el-table-column prop="proname" label="商品名称" />
                    <el-table-column label="图片">
                        <template #default="scope">
                            <el-image style="width: 80px; height: 80px" :src="scope.row.img1" />
                        </template>
                    </el-table-column>
                    <el-table-column  :sort-method="pricePai" sortable>
                        <template #header>
                            <el-tooltip :content="pricesTitle" >
                                <el-button class="pai" @click="changePrices">商品价格</el-button>
                            </el-tooltip>
                        </template>
                            
                        <template #default="scope" >
                            <span style="color: red;">￥ {{scope.row.originprice}}</span> 
                        </template>
                    </el-table-column>
                    <el-table-column label="是否开启秒杀">
                        <template #default="scope">
                            <el-switch :model-value="scope.row.isseckill" size="large" active-text="Open"
                                inactive-text="Close" :active-value="1" :inactive-value="0"
                                @change="(val)=>changes(scope.row.proid,val)" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-header>
            <el-main>
                <div class="listBottom">
                    <el-pagination background layout="prev, pager, next" :total="total" @current-change="handle"/>
                    <img src="/6.png" alt="" class="bottomImg">
                </div>
            </el-main>
            
        </el-container>
    </div>

</template>

<script>
    import {
        getPro,
        changekill
    } from '../api/product'
    export default {
        data() {
            return {
                list: [],
                total: 0,
                flag:false,
                pricesTitle:'升序'
            }
        },
        methods: {
            fetchs(c) {
                getPro(c, 10).then(res => {
                    this.flag = false;
                        this.list = res.data;
                        this.total = res.total
                })
            },
            pricePai(a,b){

                return a.originprice - b.originprice
            },
            changePrices(){
                console.log('k');
                if(this.pricesTitle == '升序'){
                    this.pricesTitle = '降序'
                }else if(this.pricesTitle == '降序'){
                    this.pricesTitle = '取消排序'
                }else{
                    this.pricesTitle = '升序'
                }
            },
            handle(i){
                this.flag = true
                this.fetchs(i)
            },
            kill(id,type,flag){
                changekill(id,type,flag).then(res=>{
                        let index = this.list.findIndex(res=>res.proid == id);
                        this.list[index].isseckill = flag

                })
            },
            changes(id,val){
                this.kill(id,'isseckill',val)
            }
        },
        created() {
            this.fetchs(1);
        }
    }
</script>


<style scoped>
    .pai{
        border: none;
    }
    .listBottom{
        height: 110px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
    }
    .bottomImg{
        width: 80px;
        height: 80px;
        position: absolute;
        bottom: 0px;
        right: 0;
    }
</style>